<script setup>
import { ref, defineProps } from 'vue'
import { regInputValue } from '../js/regInputValue.js'
import { _searchItem, _saveItem } from '/src/api/parameterConfiguration/index.js'
import { pushAllUrlData } from '../js/saveItem_all.js'
import { mainStore } from '/src/store/mainStore.js'

const store = mainStore()
const msg = defineProps({
  data: Object,
  width: Number,
  inputWidth: {
    type: String,
    default: '240px',
  },
})

const inputValue = ref('') //值
inputValue.value = msg.data.value

const showType = ref('') //显示类型
const children = ref([]) //下拉选择框的子选项
const width = ref(0)
children.value = msg.data.children
showType.value = msg.data.showType
width.value = msg.width ? msg.width + 'px' : '100%'

const editStatus = ref('') // 编辑状态 未保存为true 保存为faslse

const errTip = ref(null)

const verifyInput = (value) => {
  editStatus.value = '*'
  const res = regInputValue(value, msg.data.inputType)
  if (res.status == false) errTip.value = res.msg
  else errTip.value = null

  const { arr, key, index } = msg.data

  if (arr) {
    msg.data.arr[index] = inputValue.value - 0
  } else {
    msg.data.value = inputValue.value
  }

  pushAllUrlData(msg.data)
}

// 开关发生变化时触发
const handleSwitch = (value) => {
  editStatus.value = '*'
  msg.data.value = inputValue.value
  pushAllUrlData(msg.data)
}

// 选择框发生变化时触发
const handleSelect = (value) => {
  editStatus.value = '*'
  msg.data.value = inputValue.value
  pushAllUrlData(msg.data)
}

// 搜索选项
const searchItem = async () => {
  const { parentNode, key } = msg.data
  const url = `deep-stream-pgie-config${parentNode ? '/' + parentNode : ''}/${key}`

  const res = await _searchItem(url)

  if (res.data.code != 200) ElMessage.error('查询失败')

  ElMessage.success('查询成功')
  inputValue.value = res.data.data[key]
  editStatus.value = ''
  errTip.value = null
}

// 保存选项
const saveItem = async () => {
  if (errTip.value != null) return ElMessage.error('保存失败，请输入正确的参数值')

  const { parentNode, key, inputType } = msg.data
  const params = {}
  if (parentNode) {
    params[parentNode] = {}
    params[parentNode][key] = inputType == 'number' ? inputValue.value - 0 : inputValue.value
  } else {
    params[key] = inputType == 'number' ? inputValue.value - 0 : inputValue.value
  }
  const url = `deep-stream-pgie-config`

  const res = await _saveItem(url, params)

  if (res.data.code != 200) ElMessage.error('保存失败')

  inputValue.value = parentNode ? res.data.data[parentNode][key] : res.data.data[key]
  ElMessage.success('保存成功')
  editStatus.value = ''
  errTip.value = null
}
</script>

<template>
  <div class="inputEditer-container">
    <p :style="{ width }" :class="editStatus ? 'editing' : ''">
      <span>{{ editStatus }}</span>
      {{ msg.data.name }}
    </p>
    <!-- 普通输入框 -->
    <div class="inputBox" v-if="showType == 'input'" :style="{ width: msg.inputWidth }">
      <el-input v-model="inputValue" clearable @input="verifyInput" />
      <p class="errorTip">{{ errTip }}</p>
      <img src="/public/parameterConfig/search.png" @click="searchItem" />
      <img src="/public/parameterConfig/save.png" @click="saveItem" />
    </div>

    <!-- 禁止输入框 -->
    <div class="inputBox" v-if="showType == 'readOnly'">
      <el-input v-model="inputValue" disabled />
      <p class="errorTip">{{ errTip }}</p>
      <img src="/public/parameterConfig/search.png" @click="searchItem" />
      <img style="opacity: 0" src="/public/parameterConfig/save.png" />
    </div>

    <!-- 下拉选择框 -->
    <div class="selectBox" v-if="showType == 'select'">
      <el-select v-model="inputValue" placeholder="请选择" @change="handleSelect">
        <el-option v-for="item in children" :key="item" :label="item" :value="item" />
      </el-select>
      <img src="/public/parameterConfig/search.png" @click="searchItem" />
      <img src="/public/parameterConfig/save.png" @click="saveItem" />
    </div>

    <!-- 开关选择框 -->
    <div class="switchBox" v-if="showType == 'switch'">
      <div>
        <el-switch v-model="inputValue" width="40" size="small" @change="handleSwitch" />
      </div>
      <img src="/public/parameterConfig/search.png" @click="searchItem" />
      <img src="/public/parameterConfig/save.png" @click="saveItem" />
    </div>
  </div>
</template>

<style lang="less" scoped>
.inputEditer-container {
  width: 100%;
  height: 26px;
  display: flex;
  align-items: center;
  > p {
    line-height: 26px;
  }
  img {
    width: 20px;
    height: 20px;
    margin-left: 4px;
    cursor: pointer;
  }

  .inputBox,
  .selectBox,
  .switchBox {
    width: 240px;
    height: 100%;
    display: flex;
    align-items: center;
    position: relative;
    > div {
      width: 100%;
      height: 100%;
    }
    span {
      color: blue;
      line-height: 30px;
      width: 20px;
      font-size: 16px;
    }
  }

  .switchBox {
    > div {
      width: 50px;
    }
  }

  .editing {
    color: blue;
  }

  .errorTip {
    position: absolute;
    left: 0px;
    top: 26px;
    font-size: 10px;
    color: red;
    padding-left: 6px;
    width: 100%;
    opacity: 0.8;
  }
}
</style>

<style lang="less">
.inputBox,
.selectBox {
  .el-input,
  .el-input--suffix {
    height: 26px;
  }
  .el-input__inner,
  .el-input__wrapper {
    height: 26px;
  }

  .el-select__wrapper {
    height: 26px;
    min-height: 26px;
  }
}
</style>
